<template>
	<view class="content">
		<image class="bj" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/app/lqwd-bj.png" mode="widthFix"></image>
		<view class="main">
			<view class="text1">
				领取免费问答券
			</view>
			<view v-if="couponList" class="coupon">
				<view class="coupon-item">
					<view class="item-type">
						<view>
							{{couponList.num == 0 ? '免单' : couponList.num+'折'}}
						</view>
						优惠券
					</view>
					<view class="item-info">
						<view>{{couponList.type == 1 ? '普通问答券' : '专家问答券'}}</view>
						有效期{{couponList.day}}天
					</view>
				</view>
				<view class="coupon-item">
					<view class="item-type">
						<view>
							{{couponList.num == 0 ? '免单' : couponList.num+'折'}}
						</view>
						优惠券
					</view>
					<view class="item-info">
						<view>{{couponList.type == 1 ? '普通问答券' : '专家问答券'}}</view>
						有效期{{couponList.day}}天
					</view>
				</view>
				<view class="coupon-item">
					<view class="item-type">
						<view>
							{{couponList.num == 0 ? '免单' : couponList.num+'折'}}
						</view>
						优惠券
					</view>
					<view class="item-info">
						<view>{{couponList.type == 1 ? '普通问答券' : '专家问答券'}}</view>
						有效期{{couponList.day}}天
					</view>
				</view>
			</view>

			<view class="text2">
				领取之后，请在APP-个人中心查看
			</view>

			<view class="but" :class="{'no-but': !isGetCoupon}" @click="receive">
				{{isGetCoupon ? '立即领取' : '您已领取'}}
			</view>

		</view>

		<u-popup :show="loginShow" @close="close" mode="center" closeable>
			<view class="login">
				<view class="login-title">
					登陆
				</view>
				<u--form labelPosition="left" :model="loginForm" ref="uForm" labelWidth="65" :labelStyle="{
					padding: '15rpx 0'
				}">
					<u-form-item label="手机号" borderBottom>
						<u--input v-model="loginForm.mobile" border="none" placeholder="输入手机号"></u--input>
					</u-form-item>
					<u-form-item label="验证码" borderBottom>
						<u--input v-model="loginForm.code" border="none" placeholder="输入验证码">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>
								<view style="color: #1C87F3;font-size: 24rpx;" @click="getCode">
									{{tips}}
								</view>
							</template>
						</u--input>
					</u-form-item>
				</u--form>
				<view style="margin-top: 60rpx;">
					<u-button text="登陆" color="#FA5151" @click="login" shape="circle"></u-button>
				</view>
			</view>
		</u-popup>

		<view v-show="celebrateShow" class="celebrate">
			<image src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/app/successfullyClaimedBj.png"
				class="celebrate-bj" mode="widthFix"></image>

			<view class="close">
				<u-icon name="close-circle" color="#ffffff" size="50" class="close-i"
					@click="celebrateShow= false"></u-icon>
			</view>
			<view class="celebrate-text1">
				恭喜您获得
			</view>
			<view v-if="couponList" class="celebrate-text2">
				{{couponList.num == 0 ? '免单' : couponList.num+'折'}}优惠券
			</view>
			<view v-if="couponList" class="celebrate-text3">
				{{couponList.number}}张
			</view>
			<view class="celebrate-text4">
				请在APP---个人中心查看
			</view>
			<view class="celebrate-but" @click="celebrateShow= false">
				确定
			</view>
		</view>

		<u-modal :show="promptShow" title="" content='您已领取过问答券，请前往小竹财税APP--个人中心查看' @confirm="close"></u-modal>

	</view>
</template>

<script>
	import request from "@/api/http.js"

	function isValidPhoneNumber(phoneNumber) {
		var regex = /^1[3|4|5|7|8][0-9]{9}$/;
		return regex.test(phoneNumber);
	}
	export default {
		data() {
			return {
				loginShow: false,
				loginForm: {
					mobile: '',
					code: ''
				},
				tips: '',
				celebrateShow: false,

				couponList: null,

				token: '',
				isGetCoupon: true,
				promptShow: false
			}
		},
		onLoad() {
			this.init()
		},
		methods: {

			async init() {
				let token = uni.getStorageSync('token');
				this.token = token
				if (token) {
					const isT = await request('/api/user/getUserInfo', 'POST', {});
					if (isT.code == 401) {
						uni.removeStorageSync('token')
						this.token = ''
					}
				}
				try {
					const res = await request('/api/wechatofficial/activity_list', 'POST', {});
					if (res.code == 1)
						this.couponList = res.data
				} catch (error) {
					console.log('请求失败', error); // 处理请求失败后的错误信息  
				}
			},

			receive() {
				if (!this.isGetCoupon) {
					return
				}
				if (!this.token)
					this.loginShow = true
				else
					this.getCoupon()
			},

			async getCoupon() {
				console.log('领取优惠券')
				const res = await request('/api/wechatofficial//get_activity_reward', 'POST', {
					num: this.couponList.num,
					number: this.couponList.number,
					day: this.couponList.day
				});
				if (res.code == 1) {
					uni.$u.toast('领取成功');
					this.isGetCoupon = false
					this.celebrateShow = true
				} else {
					// uni.$u.toast(res.msg);
					this.isGetCoupon = false
					this.promptShow = true
				}
			},

			close() {
				this.loginShow = false
				this.promptShow = false
			},

			codeChange(text) {
				this.tips = text;
			},

			async getCode() {
				if (!this.loginForm.mobile) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!isValidPhoneNumber(this.loginForm.mobile)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}

				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					const res = await request('/api/sms/send', 'POST', {
						event: "mobilelogin",
						mobile: this.loginForm.mobile
					});
					if (res.code == 1) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.$u.toast('验证码发送失败，请重试');
					}

				} else {
					uni.$u.toast('请等待倒计时结束');
				}

			},

			async login() {
				if (!this.loginForm.mobile) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!isValidPhoneNumber(this.loginForm.mobile)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}
				if (!this.loginForm.code) {
					uni.$u.toast('请输入验证码');
					return
				}
				const res = await request('/api/user/mobilelogin', 'POST', {
					captcha: this.loginForm.code * 1,
					mobile: this.loginForm.mobile * 1
				});
				if (res.code == 1) {
					uni.setStorageSync('token', res.data.token)
					this.loginShow = false
					this.token = res.data.token
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #FF9363;

		.bj {
			position: absolute;
			top: 0;
			width: 100%;
			height: auto;
			display: block;
		}

		.main {
			position: relative;
			z-index: 10;

			.text1 {
				position: absolute;
				left: 0;
				top: 150rpx;
				width: 750rpx;
				text-align: center;
				font-size: 52rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				color: #FFFFFF;
				text-shadow: 0 4rpx 2rpx #D93810;
			}

			.text2 {
				position: absolute;
				left: 0;
				top: 930rpx;
				width: 750rpx;
				font-size: 24rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				color: #CE4418;
				text-align: center;
			}
		}
	}

	.coupon {
		position: absolute;
		width: 610rpx;
		left: 70rpx;
		top: 426rpx;

		.coupon-item {
			height: 150rpx;
			display: flex;
			align-items: center;
			margin-bottom: 18rpx;

			.item-type {
				width: 192rpx;
				text-align: center;
				font-size: 34rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				color: #F96343;
				line-height: 40rpx;
			}

			.item-info {
				padding-left: 50rpx;
				font-size: 24rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				color: #C68661;

				view {
					font-size: 34rpx;
					font-weight: 500;
					color: #A44B1C;
					padding-bottom: 8rpx;
				}
			}
		}
	}

	.but {
		position: absolute;
		left: 85rpx;
		top: 1028rpx;
		width: 580rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: linear-gradient(180deg, #FFFCE4 5%, #F4F697 99%);
		border-radius: 216rpx;
		font-size: 40rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		color: #CE4418;

		&:active {
			opacity: 0.9;
		}
	}

	.no-but {
		background: #C1C1C1 !important;
		color: #868686;
	}

	.login {
		width: 647rpx;
		background: #FFFFFF;
		border: 10px solid #E16138;
		padding: 48rpx 46rpx;
		box-sizing: border-box;

		.login-title {
			font-size: 46rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			color: #333333;
			text-align: center;
			padding-bottom: 15rpx;
		}
	}

	.celebrate {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.8);
		width: 750px;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 130rpx;
		text-align: center;

		.celebrate-bj {
			width: 750rpx;
			display: block;
		}

		.close {
			width: 750rpx;
			top: 60rpx;
			text-align: center;
			display: flex;
			justify-content: center;

			.close-i {
				position: relative;
				top: -84rpx;
			}
		}

		.celebrate-text1 {
			position: absolute;
			top: 342rpx;
			font-size: 50rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			text-align: center;
			color: #F93B3B;
			width: 750rpx;
		}

		.celebrate-text2 {
			position: absolute;
			top: 490rpx;
			font-size: 70rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 700;
			background-image: linear-gradient(180deg, #FF6A44 0%, #FE1000 100%);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			text-align: center;
			width: 750rpx;
		}

		.celebrate-text3 {
			position: absolute;
			top: 608rpx;
			font-size: 60rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 700;
			background-image: linear-gradient(180deg, #FF6A44 0%, #FE1000 100%);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			text-align: center;
			width: 750rpx;
		}

		.celebrate-text4 {
			font-size: 30rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			top: 786rpx;
			text-align: center;
			width: 750rpx;
		}

		.celebrate-but {
			width: 410rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: linear-gradient(360deg, #FFD107 0%, #FFE63F 100%);
			border-radius: 63rpx;
			font-size: 42rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			color: #960211;
			position: absolute;
			left: 180rpx;
			top: 850rpx;

			&:active {
				opacity: 0.9;
			}
		}
	}
</style>